(function(window, $) {
	function newIndex() {
		return ( (new Date()).valueOf() + "_" + Math.floor(Math.random()*10000));
	}
	var scopeObj;
	
	var FlowC = function($e, sucFun, cancelFun) {
		
		this.data = null;
		if (!$e || !($e)[0]) {
			console.error("没有传进来元素，将自动创建元素，在body中");
			var c = window.document.createElement("div");
			c.id = "app_id"
			document.body.appendChild(c);
			this.$e = $(c);
		} else this.$e = $e;
		this.getNodeByIndex=FlowC.getNodeByIndex;
		this.updateData=FlowC.updateData;
		this.$e.html(
			`<section  class="dingflow-design" style="background-color: none;"><div id="app_section_xcvyyyyyhy"></div></section>`
		)
		this.$c=$("#app_section_xcvyyyyyhy")
		scopeObj=this;
	}
	FlowC.id2Data={}
	FlowC.fatherNode={}
	FlowC.getNodeByIndex=function(id){
		return FlowC.id2Data["sd"+id]
	}
	FlowC.updateData=function(data){
		 FlowC.id2Data={};
		 FlowC.fatherNode={}
		 
		 updateTree(data,FlowC.id2Data,null)
	}
	function updateTree(data,tree,father){
		if(!data||!data.id)return tree;
		tree["sd"+data.id]=data;
		if(father==null)FlowC.fatherNode[data.id]=null;
		else FlowC.fatherNode[data.id]=father.id;
		if(!!data.childNode){
			tree=updateTree(data.childNode,tree,data)
		}
		if(!!data.conditionList&&data.conditionList.length>0){
			for(var i =0;i<data.conditionList.length;i++){
				tree=updateTree(data.conditionList[i],tree,data)
			}
		}
		
		return tree;
		
	}
	
	///下面几个函数是针对rools的方法
	FlowC._addClick = function(index) {
		$("#_" + index + "_tool_trip").css("display", "block");
		return false;
	}
	FlowC._addShenPiren = function(index) {
		$("#_" + index + "_tool_trip").css("display", "none");
		var data={
						type: 2,
						id: newIndex(),
						title: "审批人",
						content: "请选择",
						conditionList: [],
						others: {},
						childNode:{}
					
			}
		var curNode=FlowC.getNodeByIndex(index);
		if(!!curNode.conditionList&&curNode.conditionList.length>0){
			data.conditionList=curNode.conditionList;
			curNode.conditionList=[]
		}
		if(!!curNode.childNode){
			data.childNode=curNode.childNode;
		}
		curNode.childNode=data;
		FlowC.updateData(scopeObj.data);
		$drawData(scopeObj.$c,scopeObj.data);
		
	}
	/**增加条件节点
	 * @param {Object} index
	 */
	FlowC._addtianjian = function(index) {
		$("#_" + index + "_tool_trip").css("display", "none");
		var t1={
						type:5,id:newIndex(),title:"条件1",content:"请设置",priority:1}
		var t2={
						type:5,id:newIndex(),title:"条件2",content:"请设置",priority:2}
		
		var curNode=FlowC.getNodeByIndex(index);
		if(curNode.type==4)return "";//不可为空节点
		// //判断当前节点下面是不是条件节点，如果是条件节点则直接在下层直接添加条件，如果不是则组件虚拟节点
		// if(!!curNode.childNode&&curNode.childNode.type==4){
		// 	curNode.childNode.conditionList.append(t1);
		// }else
		{
			//把当前节点的所有子节点赋给左子树
			if(!!curNode.childNode){
				t1.childNode=curNode.childNode;
			}
			curNode.childNode={
				type:4,
				id:newIndex(),
				childNode:{},
				conditionList:[t1,t2]
			}

		}
		FlowC.updateData(scopeObj.data);
		$drawData(scopeObj.$c,scopeObj.data);
		
		
	}
	FlowC._addChaosongren = function(index) {
		$("#_" + index + "_tool_trip").css("display", "none");
		var data={
						type: 3,
						id: newIndex(),
						title: "抄送人",
						content: "请选择",
						conditionList: [],
						others: {},
						childNode:{}
					
			}
		var curNode=FlowC.getNodeByIndex(index);
		if(!!curNode.conditionList&&curNode.conditionList.length>0){
			data.conditionList=curNode.conditionList;
			curNode.conditionList=[]
		}
		if(!!curNode.childNode){
			data.childNode=curNode.childNode;
		}
		curNode.childNode=data;
		FlowC.updateData(scopeObj.data);
		$drawData(scopeObj.$c,scopeObj.data);
	}
	/**删除节点操作
	 * @param {Object} index
	 */
	FlowC.delitem=function(index){
		var curNode=FlowC.getNodeByIndex(index);
		var fatherNode=FlowC.getNodeByIndex(FlowC.fatherNode[index]);
		if(fatherNode==null) return;
		if(curNode.type==2||curNode.type==3){
			fatherNode.childNode=curNode.childNode;
			curNode=null;
		}else if(curNode.type==4){
			return ;
		}else if(curNode.type==5){
			if(fatherNode.type!=4)return;
			var idd=fatherNode.conditionList.indexOf(curNode);
			if(idd>-1){
				fatherNode.conditionList.splice(idd,1);
				if(fatherNode.conditionList.length<2){
					var grade=FlowC.getNodeByIndex(FlowC.fatherNode[fatherNode.id]);
					grade.childNode=fatherNode.childNode;
					curNode=null;
					fatherNode=null;
				}
			}else{
				return
			}
		}else{
			
		}
		FlowC.updateData(scopeObj.data);
		$drawData(scopeObj.$c,scopeObj.data);
	}
	
	FlowC.nodeClick = function(index) {
		
					
	}
	FlowC.addTJAN=function(index) {
		var t1={
						type:5,id:newIndex(),title:"条件1",content:"请设置",priority:1}
		var curNode=FlowC.getNodeByIndex(index);
		if(curNode.type!=4)return "";//不可不为空节点
		// //判断当前节点下面是不是条件节点，如果是条件节点则直接在下层直接添加条件，如果不是则组件虚拟节点
			
		curNode.conditionList.push(t1);
		FlowC.updateData(scopeObj.data);
		$drawData(scopeObj.$c,scopeObj.data);
						
	}

	function $drawData($c,data){
		$c.html($drawData_(data))
	}
	/** 生成相应html
	 * @param {Object} data
	 */
	function $drawData_(data,i,total) {
		var html = "";
		if (!data||!data.type||!data.id) return "";
		
		if (data.type == 1) { //发起节点
			html =
				`<div>
			<div class="node-wrap">
				<div class="node-wrap-box start-node " onclick="FlowC.nodeClick('${data.id}')">
					<div>
						<div class="title" style="background: rgb(87, 106, 149);">
							<span class="iconfont" style="display: none;"></span>
							<span class="iconfont" style="display: none;"></span>
							<span >${data.title}</span>
						</div>
						<div class="content">
							<div class="text" >${data.content}</div>
							<i class="anticon anticon-right arrow"></i>
						</div>
					</div>
				</div>
				${drawTools(data.id)}
			</div>
			${$drawData_(data.childNode)}
			</div>`
			return html;
		} else if (data.type == 2) { //2，审批人节点，
			html =
				`
			<div class="node-wrap">
				<div  class="node-wrap-box" onclick="FlowC.nodeClick('${data.id}')">
					<div>
						<div class="title" style="background: rgb(255, 148, 62);"><span class="iconfont"></span>
							<span class="editable-title"  >${data.title}</span>
							<i class="anticon anticon-close close" onclick="FlowC.delitem('${data.id}')"></i></div>
						<div class="content">
							<div  class="text">
								${data.content}
							</div>
							<i class="anticon anticon-right arrow"></i>
						</div>
					
					</div>
				</div>
				${drawTools(data.id)}
			</div>

			${$drawData_(data.childNode)}
			`
			return html
		} else if (data.type == 3) { //3，抄送人节点，
			html=`
				<div class="node-wrap">
					<div class="node-wrap-box">
						<div>
							<div class="title" style="background: rgb(50, 150, 250);"><span class="iconfont" style="display: none;"></span><span
								 class="iconfont" style=""></span>
								<span class="editable-title"  >${data.title}</span>
								<i class="anticon anticon-close close" onclick="FlowC.delitem('${data.id}')"></i></div>
							<div class="content">
								<div class="text" >
									${data.content}
								</div><i class="anticon anticon-right arrow"></i>
							</div>
							
						</div>
					</div>
				${drawTools(data.id)}
				
				
				</div>
				${$drawData_(data.childNode)}
				`
	return html;

		} else if (data.type == 4) { //4，空节点，5，条件节点
			html=`<div>
				<div class="branch-wrap">
					<div class="branch-box-wrap">
						<div class="branch-box"><button class="add-branch" onclick="FlowC.addTJAN('${data.id}')">添加条件</button>
						${(function(){
							var str="";
							for(var i=0;i<data.conditionList.length;i++){
								str+=$drawData_(data.conditionList[i],i,data.conditionList.length)
							}
							return str;
						})()}
					</div>
					${drawTools(data.id)}
				</div>
				</div>
				${$drawData_(data.childNode)}
				</div>
				
				`
			return html;
		} else if (data.type == 5) { //5，条件节点
			html=`
			<div class="col-box">
				<div class="condition-node">
					<div class="condition-node-box">
						<div class="auto-judge error active">
							<div class="title-wrapper">
								<!----><span class="editable-title">${data.title}</span><span class="priority-title">优先级${data.priority}</span><i class="anticon anticon-close close" onclick="FlowC.delitem('${data.id}')"></i></div>
							<div class="sort-right">&gt;</div>
							<div class="content">${data.content}</div>
							
						</div>
						${drawTools(data.id)}
					</div>
				</div>
				${$drawData_(data.childNode)}
				${
					(function(){
						var str="";
						if(i==0){
							str+= `
							<div class="top-left-cover-line"></div>
							<div class="bottom-left-cover-line"></div>
							`
						}
						if(i==total-1){
							str+=`
							<div class="top-right-cover-line" ></div>
							<div class="bottom-right-cover-line" ></div>
							`
						}
						return str;
					})()
				}
			</div>
			`;
			return html;
		} else {
			return "";
		}
		
	}


	/** 添加流程节点工具
	 * @param {Object} index
	 */
	function drawTools(index) {
		var str =
			`<div class="add-node-btn-box" style="height: 160px;" >
				<div class="add-node-btn">
				<span style="top: 48px;left: 105px;position: absolute;">
				<button onclick="FlowC._addClick('${index}')" type="button" style="padding:0"  class="btn el-popover__reference" aria-describedby="el-popover-3642" tabindex="0"><span
					 class="iconfont"></span></button>
					<div id="_${index}_tool_trip"  role="tooltip" aria-hidden="false" class="el-popover el-popper" tabindex="0" style="z-index: 2008;
					position: relative;top: -70px;left: 60px;display:none">
						<div class="add-node-popover-body">
						   <a onclick="FlowC._addShenPiren('${index}')" class="add-node-popover-item approver">
								<div class="item-wrapper"><span class="iconfont"></span>
								</div>
								<p>审批人</p>
							</a>
							<a onclick="FlowC._addChaosongren('${index}')" class="add-node-popover-item notifier">
								<div class="item-wrapper"><span class="iconfont"></span></div>
								<p>抄送人</p>
							</a><a onclick="FlowC._addtianjian('${index}')" class="add-node-popover-item condition">
								<div class="item-wrapper"><span class="iconfont"></span></div>
								<p>条件分支</p>
							</a></div>
					</div>
				</span>
			</div>
		</div>`


		return str;


	}

	FlowC.prototype.draw = function(data) {
		if (!!data) {
			this.data = data;
		} else {
			this.data = {
				type: 1, //type 1发起人节点，2，审批人节点，3，抄送人节点，4，空节点，5，条件节点
				id: newIndex(),
				title: "发起人",
				content: "所有人",
				conditionList: [],
				others: {},//此字段用于存放业务字段
				childNode:{
					id:newIndex(),
					type:4,
					conditionList: [{
						type:5,id:newIndex(),title:"条件1",content:"条件xxx",priority:1},{
						type:5,id:newIndex(),title:"条件2",content:"条件2xxx",priority:2}],
					childNode:{
						type: 2,
						id: newIndex(),
						title: "审批人",
						content: "直接上级",
						conditionList: [],
						others: {}
					}
				}

			};
		}
		FlowC.updateData(this.data);
		$drawData(this.$c,this.data);
	}

	window.FlowC = FlowC;

})(window, $)
